doctype
html{
    head{
        charset("utf8")
        http-equiv("Content-Type", "text/html; charset=UTF-8")
        title("Shorp.php@jquerymobile Demo")
        script("https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js")
        style[^
            body{ margin: auto; }
            #ptop{ display:block; margin:auto; }
            #portrait{
                display: block;
                margin:auto;
                height: 436px;
                width: 320px;
                border: 6px black solid;
                border-top: none;
            }
        $]
    }
    body{
        h3("Shorp.php@jquerymobile Demo") hr
        #main{
            #left{
                table#simulator{
                    tr td{
                        img#ptop("img/HVGAPTop.png", "HVGA top")
                        iframe#portrait("mobile/", "no")
                    }
                }
            }
            #right{
                h4("Shorp Code:")
                pre#src[^Loading demo...$]
                .center{
                    button#run("Go!")
                }
            }
        }
        br hr
        .center{
            text("Visit ")
            a("http://code.google.com/p/shorp/", "http://code.google.com/p/shorp/")
        }
    
        script[^
            var editor;
            window.onload = function() {
                editor = ace.edit("src");
                editor.setTheme("ace/theme/eclipse");
                
                //var JavaScriptMode = require("ace/mode/javascript").Mode;
                //editor.getSession().setMode(new JavaScriptMode());
            };
        $]
        
        script[^
            (function( $, undefined ) {
                $.get('demo.txt', function(data) {
                    if(editor){
                        editor.getSession().setValue(data);
                    }else{
                        $('#src').text(data);
                    }	    
                    
                    $('#run').click(function(e){
                        var code;
                        if(editor){
                            code = editor.getSession().getValue();
                        }else{
                            code = $('#src').text();
                        }
                        var url = "mobile/?src=" + encodeURIComponent(code);
                        $('#portrait').attr("src", url);
                    }).click();
                });	
            }(jQuery));
        $]
    }
}